<template>
  <div class="sel_dp_ca_page">

    <div class="search_box">
			<div class="left_item">
				<input
					type="text"
          class="search_input"
					v-model="searchName"
					clearable
					placeholder="请输入姓名搜索"
					@input="handleSearchInput"
				></input>
			</div>
			<div class="cancel_btn" @click="searchBlur">取消</div>
		</div>

    <view class="scroll_view">

      <div>


        <div class="selected_el_box" v-show="seledDataList.length > 0">  <!-- 这是选中的人-->
					<div class="uu_flex_box">
						<div class="uu_item uu_ov">
							<div class="seled_u_list">
								
								<div class="item_us" v-for="(item, index) in seledDataList" :key="index">
									<img src="@/assets/static/demo.png" class="us_pic"></img>
									<div class="">{{item.name}}</div>
									<img src="@/assets/static/icon_delete.svg" class="icon_delete_us" @click="deleteSel(index, item.id);"></img>
								</div>
								
							</div>
						</div>
						<div class="arw_box">
							<img src="@/assets/static/icon_arw_1.svg" class="icon_arw"></img>
						</div>
					</div>
				</div>


        <div class="us_area_block">


          <!-- 这是部门 => 联系人的选择形式 -->
					<div class="area_1" v-show="!searchFlag">
						
						<!-- 这是选择后的导航，如果  部门 > 联系人 -->
						<div class="nav_us_box">
							<div class="item_us_name" v-for="(item, index) in selNavList" :key="index" @click="handlenav(index)">{{item}}</div>
						</div>
						
						<div class="" v-show="currentDpIndex < 0"> <!-- 部门 -->
							
							<div class="sel_department_list">
								<div class="item_dp uu_flex_box uu_aic" :class="item.checked ? 'checked' : ''" v-for="(item, index) in caList" :key="index" @click="handleDp(index)">
									<img src="@/assets/static/icon_dp.png" class="dp_pic"></img>
									<div class="uu_item uu_ov"><div class="">{{item.name}} <span class="num_ca">（{{item.childer.length}}）</span></div></div>
									<img src="@/assets/static/icon_arw_1.svg" class="icon_arw"></img>
								</div>
							</div>
							
						</div><!-- 部门 -->
						
						<div class="" v-show="currentDpIndex >= 0"> <!-- 部门下的-联系人 -->
							
							<div class="sel_department_list">
								<div class="item_dp uu_flex_box uu_aic" v-for="(item, index) in caList[currentDpIndex]?.childer" :key="index" @click="handleCa(item.id)">
									<img src="@/assets/static/icon_dp.png" class="dp_pic"></img>
									<div class="uu_item uu_ov"><div class="">{{item.name}}</div></div>
									<img :src="item.checked ? checkboxEd : checkbox " class="sel_checkbox"></img>
								</div>
							</div>
							
						</div>
						
					</div>

          <!-- 这是模糊搜索展示的区域 -->
					<div class="area_1" v-show="searchFlag">
						<div class="sel_department_list">
							<div class="item_dp uu_flex_box uu_aic" v-for="(item, index) in currentSearchList" :key="index" @click="handleSearchCa(item.id)">
								<img src="@/assets/static/icon_dp.png" class="dp_pic"></img>
								<div class="uu_item uu_ov"><view class="">{{item.name}}</view></div>
								<img :src="item.checked ? checkboxEd : checkbox " class="sel_checkbox"></img>
							</div>
						</div>
					</div>

        </div>


      </div>



    </view>
    
    
  </div>
</template>

<script setup>

import { ref, defineProps, defineEmits } from "vue";
	import IconArw from "@/assets/static/icon_arw_1.svg";
	import checkbox from "@/assets/static/icon_checkbox_1.png";
	import checkboxEd from "@/assets/static/icon_checkbox_2.png";
	
	const emit = defineEmits('sendVal');
	
	const contactsShow = ref(false); //这是控制联系人组件显隐的
	const currentDpIndex = ref(-1); // -1代表没有点击部门，还是在部门列表中
	const searchName = ref(''); //搜索框内容
	const searchFlag = ref(false); //默认false是不展示搜索的列表的，是展示树形结构选择

	
	const swFlag = ref(true); //用来控制部门和联系人之间模块的显示，默认是true，显示的是部门，false是代表当前部门下的联系人列表数据
	
	const selNavList = ref(['部门']);
	
	//这是部门联系人数据
	const caList = ref([
		{
			id: 1, 
			type: '部门', 
			name: '技术部', 
			dpChecked: false,
			childer: [
				{ id: 11, name: '章山水', checked: false },
				{ id: 22, name: '吴克群', checked: false },
				{ id: 33, name: '周杰伦', checked: false },
			]
		},
		{
			id: 2,
			type: '部门', 
			name: '综合管理部', 
			dpChecked: false,
			childer: [
				{ id: 111, name: '小明', checked: false },
				{ id: 222, name: '大轩', checked: false },
				{ id: 333, name: '小凯', checked: false },
				{ id: 444, name: '小炮', checked: false }
			]
		},
		{
			id: 3,
			type: '部门', 
			name: '市场部', 
			dpChecked: false,
			childer: [
				{ id: 1111, name: '小凡', checked: false },
				{ id: 2222, name: '黄征', checked: false },
				{ id: 3333, name: '刘亦菲', checked: false },
				{ id: 4444, name: '马伊琍', checked: false },
				{ id: 5555, name: '刘诗诗', checked: false },
			]
		}
	]);
	
	const seledDataList = ref([]); //这是用来存储选中的联系人
	const searchList = ref([
		{ id: 11, name: '章山水', checked: false },
		{ id: 22, name: '吴克群', checked: false },
		{ id: 33, name: '周杰伦', checked: false },
		{ id: 111, name: '小明', checked: false },
		{ id: 222, name: '大轩', checked: false },
		{ id: 333, name: '小凯', checked: false },
		{ id: 444, name: '小炮', checked: false },
		{ id: 1111, name: '小凡', checked: false },
		{ id: 2222, name: '黄征', checked: false },
		{ id: 3333, name: '刘亦菲', checked: false },
		{ id: 4444, name: '马伊琍', checked: false },
		{ id: 5555, name: '刘诗诗', checked: false }
	]); //用来存储整个搜索的一维数据，就是把所有部门的联系人都整合到一起
	
	const currentSearchList = ref([]); //这是用来存储模糊查询已匹配上的数据
	
	// 关闭联系人组件
	const closeContacts = () => {
		emit('sendVal', false);
	};
	
	const searchBlur = () => {
		searchName.value = '';
		searchFlag.value = false;
	};
	
	const handleSearchInput = () => {
		if(searchName.value) {
			searchFlag.value = true;
			currentSearchList.value = searchList.value.filter(fl => fl.name.toLowerCase().includes(searchName.value.toLowerCase()))
		}else {
			currentSearchList.value = [];
		}
	};
	
	
	//选择部门下的联系人 这是下钻
	const handleDp = (index) => { 
		currentDpIndex.value = index;
		if(index >= 0) {
			selNavList.value.push('联系人');
		}else {
			selNavList.value.pop();
		}
	};
	
	
	
	// 点击导航的一些操作
	const handlenav = (index) => {
		if(index < selNavList.value.length - 1) {
			selNavList.value.splice(index + 1);
		};
		console.log('当前点击的是=========>', selNavList.value[index]);
		if(selNavList.value[index] === '部门') {
			currentDpIndex.value = -1;
		}
	};
	
	// 这是在模糊搜索内容中进行选择操作
	const handleSearchCa = (id) => {
		handleCa(id);
	};
	
	// 模糊搜索中 要回显 整个最原始的一级联系人数据列表
	const traverseSearchList = (foundChild) => {
		searchList.value = searchList.value.map(ma => {
			if(ma.id === foundChild.id) {
				return {
					...ma,
					checked: foundChild.checked
				}
			}
			return ma;
		});
	};
	
	// 这是模糊查询出来的联系人 被操作时 需要回显状态
	const traverseCurrentSearchList = (foundChild) => {
		currentSearchList.value = currentSearchList.value.map(ma => {
			if(ma.id === foundChild.id) {
				return {
					...ma,
					checked: foundChild.checked
				}
			}
			return ma;
		});
	}
	
	//这是部门联系人下的选择（只是在联系人列表中操作） 
	const handleCa = (id) => {
		let foundChild = null;
		caList.value = caList.value.map(m => {
			return {
				...m,
				childer: m.childer.map(item => {
					if(item.id === id) {
						const newChecked = !item.checked;
						foundChild = {
							...item,
							checked: newChecked
						};
						return foundChild;
					}
					return item;
				})
			}
		});
		
		// 这里遍历全部选中的
		if (foundChild) {
			if (foundChild.checked) {
				// 如果是选中状态，添加到 newselList
				seledDataList.value.push(foundChild);
				
				// 如果选中，那么数据要同步回显到搜索联系人列表中
				traverseSearchList(foundChild);
				traverseCurrentSearchList(foundChild);
				
			} else {
				// 如果是取消选中状态，从 newselList 中移除
				seledDataList.value = seledDataList.value.filter(child => child.id !== foundChild.id);
				traverseSearchList(foundChild);
				traverseCurrentSearchList(foundChild);
				
			}
		}
		
	};
	
	// 删除选中的人
	const deleteSel = (index, id) => {
		seledDataList.value.splice(index, 1);  //直接从联系人储存中删除
		handleSearchCa(id);
		caList.value = caList.value.map(m => { //然后更改最开始的那个整体的原数据
			return {
				...m,
				childer: m.childer.map(mm => {
					if(mm.id === id) {
						return {
							...mm,
							checked: false
						}
					}
					return mm;
				})
				
			}
		})
	};
	
	// 获取所有联系人接口
	const getUserAllData = async () => {
		let data = await getUserAll();
		if(data.code === 0) {
			console.log('获取到所有的联系人了===========>', data.data);
		}else {
			uni.showToast({
				title: `${data.message}`,
				icon: 'error',
				duration: 1500,
				mask: true
			});
		}
	};

</script>

<style lang="less" scoped>

.mt-32 { margin-top: 32rpx; }
.mt-20 { margin-top: 20rpx; }

.ml-32 { margin-left: 32rpx; }

.pt-12 { padding-top: 12rpx; }
.pt-40 { padding-top: 40rpx; }

.pb24 { padding-bottom: 24rpx; }

.uu_fs28 { font-size: 28rpx; }

.uu_lh40 { line-height: 40rpx; }

.uu_cor_4A5 { color: #4A5360; }
.uu_cor_282 { color: #282B2F; }

.uu_flex_box { display: flex; width: 100%; }
.uu_flex_box .uu_item { flex: 1; }
.uu_df { display: flex; }
.uu_aic { align-items: center; }

.uu_tar { text-align: right; }

.uu_ov { overflow: hidden; }

.sel_dp_ca_page {
		// position: relative;
		position: relative;
		width: 750px;
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: #F6F7F9;
    margin-left: auto;
    margin-right: auto;
		z-index: 5;
    .scroll_view {
      position: relative;
      flex: 1;
      background: khaki;
    }
		.dp_ca_title_box {
			position: relative;
			padding: 0 40px;
			height: 104px;
			background: #fff;
			.t_back{
				width: 40px;
				height: 40px;
			}
			.t_title{
				font-size: 32px;
				font-weight: bold;
				color: #282B2F;
				margin-left: 20px;
			}
		}
		// background: #F7F8FC;
		.search_box {
			position: relative;
			padding: 28px 40px;
			display: flex;
			width: 100%;
			background: #fff;
      .search_input {
        display: inline-block;
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 28px;
        color: #282B2F;
        border: 1px solid #E6E8EC;
      }
			.left_item { flex: 1; }
			.cancel_btn {
				position: relative;
				display: flex;
				align-items: center;
				font-size: 28px;
				line-height: 40px;
				color: #70747F;
				margin-left: 32px;
        cursor: pointer;
			}
		}
		.us_area_block {
			position: relative;
			padding: 28px 40px;
			.area_1 {
				position: relative;
				padding: 0 28px;
				background: #fff;
				border-radius: 32px;
				.nav_us_box {
					position: relative;
					display: flex;
					align-items: center;
					height: 96px;
					.item_us_name {
						position: relative;
						font-size: 24px;
						color: #70747F;
						margin-right: 52px;
						&::after {
							content: "";
							position: absolute;
							top: 50%;
							left: -36px;
							width: 20px;
							height: 20px;
							background: url(@/static/images/approval/icon_arw_1.svg) no-repeat;
							background-size: 20px;
							margin-top: -10px;
						}
						&:first-child::after { display: none; }
						&:last-child {
							color: #1A5AF7;
						}
					}
				}
				.sel_department_list {
					position: relative;
					.item_dp {
						position: relative;
						padding: 24px 0;
						font-size: 28px;
						color: #282B2F;
						.dp_pic {
							position: relative;
							width: 48px;
							height: 48px;
							border-radius: 50%;
							margin-right: 12px;
							vertical-align: middle;
						}
						.icon_seled {
							position: relative;
							display: none;
							width: 40px;
							height: 40px;
							margin-left: 20px;
						}
						&.checked .icon_seled { display: block; }
						.num_ca {
							position: relative;
						}
						.sel_checkbox {
							position: relative;
							width: 36px;
							height: 36px;
							margin-left: 20px;
						}
					}
				}
			}
		}
		.selected_el_box {
			position: relative;
			padding: 24px 40px;
			background: #fff;
			.seled_u_list {
				position: relative;
				display: flex;
				flex-wrap: wrap;
				margin-top: -20px;
				margin-left: -20px;
				.item_us {
					position: relative;
					display: flex;
					align-items: center;
					padding: 8px 20px 8px 8px;
					height: 64px;
					font-size: 24px;
					color: #282B2F;
					background: #F7F8FC;
					border-radius: 32px;
					margin-top: 20px;
					margin-left: 20px;
					.us_pic {
						position: relative;
						width: 48px;
						height: 48px;
						border-radius: 50%;
						margin-right: 12px;
					}
					.icon_delete_us {
						position: relative;
						width: 28px;
						height: 28px;
						margin-left: 12px;
					}
				}
			}
		}
		.page_bottom_btn {
			position: relative;
			background: #fff;
			.btn_area_box {
				position: relative;
				padding: 40px;
				.m_btn_sty {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 90px;
					font-size: 32px;
					color: #fff;
					background: #0077FF;
					border-radius: 16px;
				}
			}
		}
		.arw_box {
			position: relative;
			display: flex;
			height: 64px;
			align-items: center;
			margin-left: 10px;
			.icon_arw {
				position: relative;
				width: 20px;
				height: 20px;
			}
		}
		
		.icon_arw {
			position: relative;
			width: 20px;
			height: 20px;
		}

    .searchBlur {
      position: relative;
      cursor: pointer;
    }
		
	}

</style>